[CSS] display와 visibility 속성을 사용해 특정 요소 사라지게 만드는 방법 및 팁

CSS를 사용해 특정 콘텐츠 및 요소를 사라지게 만들어야 할 경우가 있습니다. 이때 사용가능한 속성이 바로 display와 visibility입니다. 이 둘 속성은 매우 자주쓰이는데요... 사라지게 한다는 점에서는 같으나 둘의 차이점은 무엇일까요?

# display와 visibility 속성의 차이점

이 두 CSS 속성의 가장 큰 차이점은 보였을때의 공간... 즉, 기존의 영역을 빈공간으로 차지하고 사라지느냐 아니면 빈공간까지 모두 사라지게 하느냐의 차이점입니다...

둘 다 CSS를 수행하면 보이지 않는 것은 동일하나 visibility 속성은 해당하는 요소의 영역이 보이지만 않을 뿐 화면에 그대로 빈공간으로 유지됩니다. 영역 자체는 사라지지 않는 것이죠... 이와달리 display 속성은 영역 자체까지 사라지기 때문에 인접한 요소의 레이아웃에 영향을 미칠 수 있습니다. 간단하게 예제를 통해 알아볼까요?

# display와 visibility 예제 보기

아래 예제는 몇 개의 요소를 만들고 각각 다른 CSS 속성인 display, visibility를 적용하여 차이점을 알아봅니다.

위 코드를 실행하면 아래처럼 나타납니다.




B 요소를 사라지게 하기 위해 두 가지 속성을 사용해보겠습니다.

! display: none을 적용한 경우

먼저 display: none 속성 추가하도록 하겠습니다.

아래와 같이 나타납니다.




즉,  B의 요소와 영역이 모두 사라지게 되죠. 그럼 visibility의 경우는?

! visibility: hidden 속성을 적용

이번에는 visibility를 적용한 경우에 차이점을 알아봅니다.

실행하면 아래처럼 나타나죠.




보시는 것처럼 B의 요소는 사라지나 해당하는 영역은 유지되게됩니다. 매우 큰 차이입니다.


@ 마치면서.
둘의 차이점을 아시겠나요? 레이아웃을 고려할 때 어떤 속성을 사용하는게 더 좋을지 선택할 필요가 있겠습니다.